<include file="public@header"/>
<style type="text/css">
    #select{width: 100%; margin-bottom: 20px;}
    #select div{display: inline-block; line-height: 28px; padding: 0 6px; margin: 0 5px; border: 1px solid #ddd;}
    #select div a{margin-left: 5px;}
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <if condition="$Request.param.status == 1">
            <li class="active"><a href="">行政班管理</a></li>
        <else/>
            <li class="active"><a href="">主题班管理</a></li>
        </if>
    </ul>
    <form class="well form-inline margin-top-20" > 
       
        年级:
        <select class="form-control grad" name="grad" style="width: 140px;">
            <foreach name="data_grad" item="vo">
                <option value="{$vo.grad}">{$vo.grad}</option>
            </foreach>
        </select> &nbsp;&nbsp;
        班级:
        <select class="form-control classes" name="classes" style="width: 140px;">
            
        </select> &nbsp;&nbsp;
        <!-- 关键字:
        <input type="text" class="form-control" name="keyword" style="width: 200px;"
               value="{$keyword|default=''}" placeholder="请输入关键字..."> -->
        <input type="button" class="btn btn-primary" value="搜索"/>
    </form>
    <form method="post" class="js-ajax-form margin-top-20" action="">
        <div id="select">

        </div>
        <button class="btn btn-primary btn-sm js-ajax-submit add" type="button" 
                 data-subcheck="true">添加
        </button>
        <button class="btn btn-danger btn-sm js-ajax-submit create" type="button" 
                 data-subcheck="true">生成班
        </button>
        <table class="table table-hover table-bordered table-list">
            <thead>
            <tr>
                <th width="16"><label><input type="checkbox" class="js-check-all" data-direction="x"
                                             data-checklist="js-check-x" value="0"></label></th>
               
               
                <th>姓名</th>
	
            </tr>
            </thead>
            <tbody class="tbody">
                
            </tbody>
           
        </table>
         <ul class="pagination">{$page|default=''}</ul>
    </form>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">

    getClasses();

    $('.grad').change(function(){
          getClasses();
    });

    function getClasses(){
        var grad = $(".grad").val();
        $.post("{:cmf_url('getClasses')}",{grad:grad},function(data){
     
            var html = '';
            for(let i in data.data) {  
           
                html += ' <option value="'+data.data[i].classes+'">'+data.data[i].classes+'</option>'; 
            };  
            $('.classes').html(html);
            getData();
        })
    }
    
    $('.classes').change(function(){
          getData();
    });

    function getData(){
        var grad = $(".grad").val();
        var classes = $(".classes").val();
        $.post("{:cmf_url('getData')}",{grad:grad,classes:classes},function(data){
     
            var html = '';
            for(let i in data.data) {  
           
                html += '<tr><td><input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]" value="'+data.data[i].id+'"></td><td>'+data.data[i].realName+'</td></tr>'; 
            };  
            $('.tbody').html(html);
            $('input:checkbox').attr("checked", false);
        })
    }

    $(".create").click(function(){
        var vals = [];
        $('.user_id').each(function (index, item) {
            var id = $(this).val();
            vals.push(id);
        });
        vals = vals.join('-');
        window.location.href = 'http://'+window.location.host+"/teacher/Relation/add_1/status/"+{$Request.param.status}+"/ids/"+vals;
        //打开新增窗口,生成班
        /* openIframeLayer("/teacher/Relation/add_1/status/1/ids/"+vals, '生成行政班', {
            area: ['80%', '80%'],
        });*/
   
    });

    $('.add').click(function(){
        //var vals = [];
        var html = '';
        $('input:checkbox:checked').each(function (index, item) {  
            if($(this).val() != 0){
                var name = $(this).parent().next().text();
                var id = $(this).val();
                html += '<div>'+name+'<input name="id" type="hidden" class="user_id" value="'+id+'"><a class="del">X</a></div>';
                //var info = new Array(name,id);

               // console.log(info);
                //vals.push(info);
            }
           
         });
        //console.log(html);
        $('#select').append(html);
         //console.log(vals);
    });

    //删除
    $(document).on("click",".del",function () {
       $(this).parent().remove();
    });

    function checj_all(){
        if ($('.js-check-wrap').length) {
            var total_check_all = $('input.js-check-all');

            //遍历所有全选框
            $.each(total_check_all, function () {
                var check_all = $(this),
                    check_items;

                //分组各纵横项
                var check_all_direction = check_all.data('direction');
                check_items             = $('input.js-check[data-' + check_all_direction + 'id="' + check_all.data('checklist') + '"]').not(":disabled");

                //点击全选框
                check_all.change(function (e) {
                    var check_wrap = check_all.parents('.js-check-wrap'); //当前操作区域所有复选框的父标签（重用考虑）

                    if ($(this).prop('checked')) {
                        //全选状态
                        check_items.prop('checked', true);

                        //所有项都被选中
                        if (check_wrap.find('input.js-check').length === check_wrap.find('input.js-check:checked').length) {
                            check_wrap.find(total_check_all).prop('checked', true);
                        }

                    } else {
                        //非全选状态
                        check_items.removeProp('checked');

                        check_wrap.find(total_check_all).removeProp('checked');

                        //另一方向的全选框取消全选状态
                        var direction_invert = check_all_direction === 'x' ? 'y' : 'x';
                        check_wrap.find($('input.js-check-all[data-direction="' + direction_invert + '"]')).removeProp('checked');
                    }

                });

                //点击非全选时判断是否全部勾选
                check_items.change(function () {

                    if ($(this).prop('checked')) {

                        if (check_items.filter(':checked').length === check_items.length) {
                            //已选择和未选择的复选框数相等
                            check_all.prop('checked', true);
                        }

                    } else {
                        check_all.removeProp('checked');
                    }

                });


            });

        }
    }

    $('.js-check-all').click(function(){
        checj_all()
    });


    function edit(id){
        //打开新增窗口
        openIframeLayer("/teacher/Template_group/editCategory/id/"+id, '编辑模板及主题活动', {
            area: ['600px', '600px'],
        });
    }
    function add(id){
        //打开新增窗口
        openIframeLayer("/teacher/Template_group/add/id/"+id, '添加套件', {
            area: ['600px', '600px'],
        });
    }
</script>
</body>
</html>